<template>
 <div class="artist">
   <div class="hd">
     <img class="cover" :src="data.artist.cover" alt="">
     <div class="artist-info">
       <p class="name">{{data.artist.name}}</p>
       <div class="simple">
         <p class="nickname">
           <span>昵称：{{data.user.nickname}}</span>
         </p>
         <p class="follow">
           <span>关注：{{data.eventCount}} | 粉丝：20.2万</span>
         </p>
         <p class="identities-area">
           <span>{{data.artist.identifyTag[0]}}</span>
         </p>

       </div>
     </div>
   </div>
   <h2 class="jianjie1">歌手简介</h2>
     <div class="intro">
       <p :class="{'f-thide3':active}" style="color:#666">{{data.artist.briefDesc}}</p>
       <div class="full"  @click="activetou()">{{active?"完整歌手介绍":"收起"}}
         <i class="arrow" :class="{'arrow-up':active}"></i>
       </div>
       <span>
         <h2 class="jianjie">热门单曲</h2>
         <div class="m-sglst">
       <div href="" class="m-sgitem" v-for="(item,i) in hotsong" :key="item.id" @click="selectPlayList(item)">
         <div class="sgfl">{{i+1}}</div>
         <div class="sgfr f-bd f-bd-btm">
           <div class="sgchfl">
             <div class="f-thide sgtl">{{item.name}}
               <span class="sgalia">{{item.alia[0]}}</span>
             </div>
             <div class="f-thide sginfo">
               <span class="xie" v-for="item1 in item.ar" :key="item1.id">
                 <i class="u-hmsprt sghot"></i>
                 {{item1.name}}
                 <span>/</span>
                 </span>
                - {{item.name}}</div>
           </div>
           <div class="sgchfr">
             <span class="u-hmsprt sgchply"></span>
           </div>
         </div>
       </div>
     </div>
       </span>
     </div>
   <h2 class="jianjie1">最新音乐</h2>  
    <div class="album-info" v-for="item in album" :key="item.id" @click="toSonglistdetails(item)">
      <img class="album-cover" :src="item.blurPicUrl">
      <div class="album-other">
        <p class="album-name">{{item.name}}</p>
        <p class="album-artist-name">{{item.artist.name}}</p>
        <p class="album-songs">
          <span>{{item.size}}首</span>
          <span class="date">{{item.publishTime}}</span>
        </p>
      </div>
    </div>
 </div>
</template>
<script>


import axios from "axios";


export default {
  data() {
    return {
      data: [],
      active:true,
      hotsong:[],
      album:[],
    };
  },

  created() {
   this.getlist();
   this.gethotsong();
   this.getalbum();
  },

  methods: {
   getlist() {
     console.log(this.$route.params.id)
      axios
        .get("http://171.220.242.237:3001/artist/detail",
         {params:{id:this.$route.params.id}})
        .then((res) => {
           console.log(res);
          this.data = res.data.data;
          console.log(this.data)
        })
        .catch((err) => {
          console.error(err);
        });
    },
    gethotsong() {
     console.log(this.$route.params.id)
      axios
        .get("http://171.220.242.237:3001/artists",
         {params:{id:this.$route.params.id}})
        .then((res) => {
           console.log(res);
           for (let i = 0; i < 10; i++) {
           this.hotsong = this.hotsong.concat(res.data.hotSongs[i]);
           }
          
          console.log(this.hotsong)
        })
        .catch((err) => {
          console.error(err);
        });
    },
    getalbum() {
     console.log(this.$route.params.id)
      axios
        .get("http://171.220.242.237:3001/artist/album?id="+this.$route.params.id+"&limit=3")
        .then((res) => {
           console.log(res);
           for (let i = 0; i < res.data.hotAlbums.length; i++) {
             var time=new Date(res.data.hotAlbums[i].publishTime).toLocaleString()
           res.data.hotAlbums[i].publishTime=time
           }
           this.album = res.data.hotAlbums;
           console.log(this.album)
        })
        .catch((err) => {
          console.error(err);
        });
    },

    selectPlayList(item){
      const id=item.id
      console.log(id)
      this.$router.push({
        name:'#播放页面',
        params :{id}
      })
    },
    toSonglistdetails(item){
      const id=item.id
      console.log(id)
      this.$router.push({
        name:'#歌单详情页面',
        params :{id}
      })
    },
    activetou(){
      this.active=!this.active
    }

  },

};
</script>
<style scoped>
.m-sgitem .sghot {
    display: inline-block;
    width: 12px;
    height: 8px;
    margin-right: 4px;
}
.u-hmsprt {
    background-image: url(//s3.music.126.net/mobile-new/img/index_icon_3x.png?49a82fe…=);
}
.xie:last-child span{
  display: none;
}
.artist .mgt8 {
    margin-top: 8px;
}
div {
    display: block;
}
.artist {
  position: absolute;
    top: 0;
    background-color: #fcfcfd;
}.artist .hd {
    position: relative;
}.artist .cover {
    top: 0;
}
.artist .hd:after{
    top: 0;
}
abbr, body, fieldset, html, iframe, img {
    border: 0;
}
img{
  width: 100%;
  height: 336px;
}.artist .artist-info {
    text-align: left;
    position: absolute;
    left: 16px;
    bottom: 30px;
    color: #fff;
    z-index: 2;
}.artist .artist-info .name {
    font-size: 20px;
    line-height: 20px;
}.artist .artist-info .simple {
    margin-top: 15px;
    opacity: .8;
    font-size: 12px;
    line-height: 12px;
}.artist .artist-info .follow, .artist .artist-info .identities-area {
    height: 12px;
    margin-top: 10px;
}
.artist .intro {
    background: #fff;
    padding: 0 16px 18px;
}.jianjie{
  margin-top: 20px;
  font-size: 16px;
  text-align: left;
}.jianjie1{
  padding: 0 16px 18px;
  font-size: 16px;
  text-align: left;
}
.f-thide3 {
    -webkit-line-clamp: 3;
}.f-thide3 {
    overflow: hidden;
    text-overflow: ellipsis;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
}.artist .full {
    font-size: 14px;
    color: #666;
    text-align: center;
    margin-top: 25px;
}.artist .arrow {
    display: inline-block;
    position: relative;
    width: 9px;
    height: 9px;
    background: url();
    background-size: contain;
    background-repeat: no-repeat;
    left: 4px;
    top: 0;
}.artist .arrow.arrow-up {
    -webkit-transform: rotate(
180deg
);
    -ms-transform: rotate(180deg);
    transform: rotate(
180deg
);
    width: 12px;
    height: 12px;
    top: 2px;
}
.m-sglst {
    position: relative;
}
.m-sgitem {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
}
.m-sgitem .sgfl {
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    -webkit-box-pack: center;
    -webkit-justify-content: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 40px;
    font-size: 17px;
    color: #999;
    margin-left: -10px;
    text-align: center;
    padding-top: 10px;
    padding-left: 5px;
}
.m-sgitem .sgfr {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: flex;
    position: relative;
}
.f-bd {
    position: relative;
}
.m-sgitem .sgchfl {
    padding: 6px 0;
    width: 0;
}
.m-sgitem .sgchfl, .m-sgitem .sgfr {
    -webkit-box-flex: 1;
    -webkit-flex: 1 1 auto;
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}
.m-sgitem .sgtl {
    font-size: 17px;
    text-align: left;
}
.f-thide {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    word-break: normal;
}
.m-sgitem .sginfo {
    font-size: 12px;
    color: #888;
    text-align: left;
}
.m-sgitem .sgchfr {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
    padding: 0 10px;
}
.m-sgitem .sgchply {
    display: inline-block;
    width: 22px;
    height: 22px;
    background-position: -24px 0;
}
/* 最新音乐 */
.u-hmsprt {
    background: url(//s3.music.126.net/mobile-new/img/index_icon_2x.png?5207a28…=) no-repeat;
    background-size: 166px 97px;
}
.album-info {
    position: relative;
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    height: 80px;
    background: #fff;
    padding: 0 15px 20px;
    -webkit-box-align: center;
    -webkit-align-items: center;
    -ms-flex-align: center;
    align-items: center;
}.album-info .album-cover {
    position: relative;
    width: 80px;
    height: 80px;
    border-radius: 4px;
    background-size: cover;
    margin-right: 25px;
}.album-info .album-cover:after {
    position: absolute;
    content: "";
    width: 90px;
    height: 100%;
    background: url(/mobile-new/img/album@3x.png?0ec33f3…);
    background-size: contain;
    background-repeat: no-repeat;
    right: -10px;
}.album-info .album-name {
  text-align: left;
    font-size: 15px;
}.album-info .album-artist-name, .album-info .album-songs {
  text-align: left;
    font-size: 13px;
    color: #888;
}.album-info .album-songs {
  text-align: left;
    margin-top: 10px;
    font-size: 13px;
    color: #888;
}.album-info .date {
    margin-left: 4px;
}
</style>